<template>
  <el-main class="e-m-2" :style='{"background-image":"url("+bg+")"}'>
    <div class="di-text">
      <h3>{{rich}}</h3>
      <span>{{line}}</span>
    </div>
    <div class="e-m-22">
      <el-row :gutter="20" class="e-m-2-2">
        <el-col :span="6" class="e-m-2-2-col">
          <div class="e-m2-div">
            <div class="e-m2-div-1">
              <img :src="word.img" alt="">
              <span>
                    <em>
                       {{word.text}}
                    </em>
                  </span>
            </div>
            <div class="e-m2-div-2">
                  <span>
                      <em>
                       {{word.text2}}
                      </em>
                  </span>
              <p>
                {{word.text3}}
              </p>
            </div>
          </div>
        </el-col>
        <el-col :span="6" class="e-m-2-2-col">
          <div class="e-m2-div content-2">
            <div class="e-m2-div-1">
              <img :src="word2.img" alt="">
              <span>
                    <em>
                       {{word2.text}}
                    </em>
                  </span>
            </div>
            <div class="e-m2-div-2">
                  <span>
                      <em>
                       {{word2.text2}}
                      </em>
                  </span>
              <p>
                {{word2.text3}}
              </p>
            </div>
          </div>
        </el-col>
        <el-col :span="6" class="e-m-2-2-col">
          <div class="e-m2-div content-3">
            <div class="e-m2-div-1">
              <img :src="word3.img" alt="">
              <span>
                    <em>
                       {{word3.text}}
                    </em>
                  </span>
            </div>
            <div class="e-m2-div-2">
                  <span>
                      <em>
                         {{word3.text2}}
                      </em>
                  </span>
              <p>
                {{word3.text3}}
              </p>
            </div>
          </div>
        </el-col>
        <el-col :span="6" class="e-m-2-2-col">
          <div class="e-m2-div content-4">
            <div class="e-m2-div-1">
              <img :src="word4.img" alt="">
              <span>
                    <em>
                        {{word4.text}}
                    </em>
                  </span>
            </div>
            <div class="e-m2-div-2">
                  <span>
                      <em>
                       {{word4.text2}}
                      </em>
                  </span>
              <p>
                {{word4.text3}}
              </p>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-main>
</template>

<script>
  export default {
    name: "ContentFirst",
    data(){
      return{
        bg:'https://bianke.cnki.net/resources/images/dachengForum/dcjt_bg1.jpg',
        rich:'丰富的讲座形式',
        line:'图文、音频、视频、PPT...精彩纷呈',
        word:{
          img:'https://bianke.cnki.net/resources/images/dachengForum/dcjt_icon1.png',
          text:'图文讲座',
          text2:'编写图文讲座',
          text3:'图文讲座以文字和图片为主要内容，可辅助插入音频、视频等多媒体内容，使讲座丰富多彩'
        },
        word2: {
          img:'https://bianke.cnki.net/resources/images/dachengForum/dcjt_icon2.png',
          text:'音频讲座',
          text2:' 发布音频讲座',
          text3:'音频讲座以音频为主要内容，可在摘要处辅助插入图文，使讲座内容更加充实完整'
        },
        word3: {
          img:'https://bianke.cnki.net/resources/images/dachengForum/dcjt_icon3.png',
          text:'视频讲座',
          text2:'发布视频讲座',
          text3:'视频讲座以视频为主要内容，可在摘要处辅助插入图文，使讲座内容更加充实完整'
        },
        word4: {
          img:'https://bianke.cnki.net/resources/images/dachengForum/dcjt_icon4.png',
          text:'PTT讲座',
          text2:'发布PTT讲座',
          text3:'PPT讲座以演示文稿的形式，可将图片、文字、音频、视频等内容融会贯通，更完整表达讲座内容'
        },
      }
    }
  }
</script>

<style scoped>
  .di-text {
    width: 600px;
    margin: 5px auto;
  }
  .e-m-2 {
    height: 629px;
    overflow: auto;
    text-align: center;
  }
  .e-m-22 {
    margin-left: 120px;
  }
  .e-m-2-2 {
    width: 1500px;
  /*  position: relative;*/
    margin-left: 100px;

  }
  .e-m2-div-2 {
    height: 50%;
    background-color: rgb(255, 255, 255);
    border-top: 1px rgb(228,244,225) solid;
  }
  .e-m2-div-1 {
    height: 50%;
    background-color: rgb(246, 255, 244);
  }
  .e-m-2-2-col {
    height: 400px;
  }
</style>
